import React, { Component } from 'react';
import styles from './Sessions.scss';
import { observable, action, computed } from 'mobx';
import { observer } from 'mobx-react';

import initView from '@/cross/components/View';
const View = initView(styles);
import initText from '@/cross/components/Text';
const Text = initText(styles);
import initImage from '@/cross/components/Image';
const Image = initImage(styles);
import initScrollView from '@/cross/components/ScrollView';
const ScrollView = initScrollView(styles);
import initImageBackground from '@/cross/components/ImageBackground';
const ImageBackground = initImageBackground(styles);

import { Page, HeaderBar, TabItem, Button, Modal, AutoList, ListItem } from '@/cross/components';

import { CrossPageProps } from '@/cross/pages/PropType';
import { Client } from '@/config';
import { $service, $confirm, $message, $actionSheet } from '@/cross/utils';
import { ISession } from '../../types';
import authStore from '@/cross/stores/auth';
import im, { IM } from '@/types/modules/im/client/store/im';
import SessionItem from '../components/SessionItem';
import { Icon } from '@/cross/components/Icon';

interface IProps extends CrossPageProps {}

@observer
class PageView extends Component<IProps> {
  componentDidMount() {
    authStore
      .afterLogin(false, { fromPageName: 'Sessions', allwaysWaitLogin: true, needRole: false })
      .then((userInfo) => {
        im.connect({
          account: 'im' + authStore.userInfo.id,
          token: 'token',
          client: Client,
        });
      })
      .catch(() => {});
  }

  handleClick = (session: ISession, index: number) => {
    im.startChat({
      to: session.to || '',
      name: session.name || '',
      avatar: session.avatar || '',
      scene: 'p2p',
    });
  };

  handleClickAvatar = (session: ISession, index: number) => {};

  handleLongClick = (session: ISession, index: number) => {
    $actionSheet([session.isTop ? '取消置顶' : '置顶', '删除会话', '取消'])
      .then((i) => {
        /* 置顶 */
        if (i === 0 && session.sessionId) {
          if (!session.isTop) {
            IM.mim?.addStickTopSession({
              id: session.sessionId,
            });
          } else {
            IM.mim?.deleteStickTopSession({
              id: session.sessionId,
            });
          }
        }
        /* 删除会话 */
        if (i === 1 && session.scene && session.to) {
          IM.mim?.deleteSession({
            scene: session.scene,
            to: session.to,
            done: () => {},
          });
        }
      })
      .catch(() => {});
  };

  renderItem = ({ item, index }: { item: ISession; index: number }) => {
    return (
      <SessionItem
        key={item._id}
        onClick={this.handleClick.bind(this, item, index)}
        onClickAvatar={this.handleClickAvatar.bind(this, item, index)}
        onLongPress={this.handleLongClick.bind(this, item, index)}
        index={index}
        session={item}
      />
    );
  };

  render() {
    const { sessionlist } = im;
    console.log('[sessionlist] ', sessionlist);
    return (
      <Page statusBarMode="dark" className="M-b-c-e">
        <HeaderBar
          title="会话"
          titleAlign="left"
          mode="light"
          leftContent={null}
          showBack={false}
          rightContent={
            <View className="M-p-h-b-10 M-p-v-b-5 M-vertical-middle">
              <Icon name="peoples" theme="light" size={40} />
            </View>
          }
        />
        <ScrollView
          onScrollToLower={IM.mim?.loadNextSession}
          style={{ backgroundColor: '#f5f5f5' }}
        >
          <View className="M-p-t-10" />
          {sessionlist.map((item, index) => this.renderItem({ item, index }))}
        </ScrollView>
      </Page>
    );
  }
}

export default PageView;
